<template>
  <div class="MenuContent">
    <n-menu v-if="width > 800" class="optionMenu" title="" :options="menuOption" v-model:value="nowOption" />
    <n-menu v-if="width > 800" style="opacity: 0;" title="" :options="menuOption" v-model:value="nowOption" />
    <CDynamicForm :class="{ 'cdynamicForm-untauri': !TauriF.isTauri() }" ref="CDynamicFormRef"
      v-model:value="chatSettings![nowOption]">
      <template v-slot:modelName="{ data }">
        <n-form-item :label="data.label" :path="data.prop">
          <n-select v-model:value="data.value" :options="modelList" :placeholder="'请选择' + data.label">
          </n-select>
          <c-button :loading="modelLoading" @click="getModelList" iconName="RefreshSharp" quaternary
            type='primary'></c-button>
        </n-form-item>
      </template>
    </CDynamicForm>
  </div>
</template>

<script setup lang='ts'>
import type { SelectMixedOption } from 'naive-ui/es/select/src/interface';
const { width } = useWindowSize()
const TauriF = Tauri
const { chatSettings, nowOption } = storeToRefs(chatSettingStore())
const menuOption = ObjectToKeyArray<FormTemplatesOption>(chatSettings.value)!.map((e) => {
  return {
    label: e.value.label,
    key: e.key
  }
})

//  获取模型列表
const modelLoading = ref(false)
const modelList = ref<SelectMixedOption[]>([])
const getModelList = async () => {
  modelLoading.value = true
  const { data, error } = await OpenAIApi().getModelList()
  modelLoading.value = false
  if (error) return
  modelList.value = (data as any).data.map((e: { root: string, id: string }) => ({ label: e.id, value: e.id }))
}
</script>
<style lang="scss">
.MenuContent {
  position: relative;
  display: flex;
  padding: 10px;

  .CDynamicForm {
    flex: 1;
    margin-top: 30px;
    height: calc(100vh - 30px);
    padding-right: 5px;
    overflow: auto;
  }

  .cdynamicForm-untauri {
    margin-top: 0;
    height: unset !important;
  }

  .optionMenu {
    z-index: 2;
    margin-top: 10px !important;
    position: absolute;
    top: 0;
  }
}
</style>